<template>
  <div class="facility-repair">
    <div class="header">
      <router-link to="/main/wuye/facility/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>故障维修</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待维修" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="deviceNo" label="设备编号" width="180"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
            <el-table-column prop="location" label="设备位置" width="180"></el-table-column>
            <el-table-column prop="faultType" label="故障类型" width="120"></el-table-column>
            <el-table-column prop="urgencyLevel" label="紧急程度" width="120">
              <template slot-scope="scope">
                <el-tag :type="getUrgencyType(scope.row.urgencyLevel)">
                  {{ scope.row.urgencyLevel }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="reportTime" label="报修时间" width="180"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="startRepair(scope.row)">维修</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="维修中" name="processing">
          <el-table :data="processingList" style="width: 100%">
            <el-table-column prop="deviceNo" label="设备编号" width="180"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
            <el-table-column prop="repairStaff" label="维修人员" width="120"></el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
            <el-table-column prop="progress" label="维修进度" width="200">
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.progress"></el-progress>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="success" @click="completeRepair(scope.row)">完成</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已完成" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="deviceNo" label="设备编号" width="180"></el-table-column>
            <el-table-column prop="deviceName" label="设备名称" width="150"></el-table-column>
            <el-table-column prop="repairStaff" label="维修人员" width="120"></el-table-column>
            <el-table-column prop="completionTime" label="完成时间" width="180"></el-table-column>
            <el-table-column prop="repairResult" label="维修结果" width="120">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.repairResult }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="故障维修详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="device-detail" v-if="currentDevice">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="设备编号">{{ currentDevice.deviceNo }}</el-descriptions-item>
          <el-descriptions-item label="设备名称">{{ currentDevice.deviceName }}</el-descriptions-item>
          <el-descriptions-item label="设备位置">{{ currentDevice.location }}</el-descriptions-item>
          <el-descriptions-item label="故障类型">{{ currentDevice.faultType }}</el-descriptions-item>
          <el-descriptions-item label="紧急程度">{{ currentDevice.urgencyLevel }}</el-descriptions-item>
          <el-descriptions-item label="报修时间">{{ currentDevice.reportTime }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>故障描述</h4>
          <p>{{ currentDevice.faultDescription }}</p>
        </div>

        <div class="detail-section" v-if="currentDevice.repairHistory">
          <h4>维修记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentDevice.repairHistory"
              :key="index"
              :timestamp="record.time">
              {{ record.staff }} - {{ record.action }}
              <p class="repair-content">{{ record.content }}</p>
              <p v-if="record.remark" class="repair-remark">备注：{{ record.remark }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>

        <div class="detail-section" v-if="currentDevice.parts">
          <h4>更换配件</h4>
          <el-table :data="currentDevice.parts" border style="width: 100%">
            <el-table-column prop="name" label="配件名称"></el-table-column>
            <el-table-column prop="quantity" label="数量"></el-table-column>
            <el-table-column prop="price" label="单价"></el-table-column>
            <el-table-column label="金额">
              <template slot-scope="scope">
                {{ scope.row.quantity * scope.row.price }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 维修表单对话框 -->
    <el-dialog :title="repairDialogTitle" :visible.sync="repairDialogVisible" width="50%">
      <el-form :model="repairForm" label-width="100px">
        <el-form-item label="故障诊断" v-if="!isCompleting">
          <el-input type="textarea" v-model="repairForm.diagnosis" rows="4"></el-input>
        </el-form-item>

        <el-form-item label="维修方案" v-if="!isCompleting">
          <el-input type="textarea" v-model="repairForm.solution" rows="4"></el-input>
        </el-form-item>

        <el-form-item label="更换配件">
          <div v-for="(part, index) in repairForm.parts" :key="index" class="part-item">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-input v-model="part.name" placeholder="配件名称"></el-input>
              </el-col>
              <el-col :span="4">
                <el-input-number v-model="part.quantity" :min="1" placeholder="数量"></el-input-number>
              </el-col>
              <el-col :span="6">
                <el-input-number v-model="part.price" :min="0" placeholder="单价"></el-input-number>
              </el-col>
              <el-col :span="4">
                <el-button type="text" @click.prevent="removePart(index)">删除</el-button>
              </el-col>
            </el-row>
          </div>
          <el-button style="margin-top: 10px;" @click="addPart">添加配件</el-button>
        </el-form-item>

        <el-form-item label="维修进度" v-if="!isCompleting">
          <el-slider v-model="repairForm.progress"></el-slider>
        </el-form-item>

        <el-form-item label="维修结果" v-if="isCompleting">
          <el-radio-group v-model="repairForm.result">
            <el-radio label="已修复">已修复</el-radio>
            <el-radio label="需更换">需更换</el-radio>
            <el-radio label="无法修复">无法修复</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="维修说明">
          <el-input type="textarea" v-model="repairForm.remark" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="repairDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRepair">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          deviceNo: 'SB202403001',
          deviceName: '中央空调主机',
          location: 'A栋-设备间',
          faultType: '异常噪音',
          urgencyLevel: '紧急',
          reportTime: '2024-03-12 10:00:00',
          faultDescription: '设备运行时发出异常噪音，振动较大'
        }
      ],
      processingList: [],
      completedList: [],
      detailDialogVisible: false,
      repairDialogVisible: false,
      currentDevice: null,
      isCompleting: false,
      repairForm: {
        diagnosis: '',
        solution: '',
        parts: [],
        progress: 0,
        result: '已修复',
        remark: ''
      }
    }
  },
  computed: {
    repairDialogTitle() {
      return this.isCompleting ? '完成维修' : '开始维修'
    }
  },
  methods: {
    getUrgencyType(level) {
      const map = {
        '一般': 'info',
        '紧急': 'warning',
        '特急': 'danger'
      }
      return map[level] || 'info'
    },
    viewDetail(row) {
      this.currentDevice = row
      this.detailDialogVisible = true
    },
    startRepair(row) {
      this.currentDevice = row
      this.isCompleting = false
      this.repairForm = {
        diagnosis: '',
        solution: '',
        parts: [],
        progress: 0,
        result: '已修复',
        remark: ''
      }
      this.repairDialogVisible = true
    },
    completeRepair(row) {
      this.currentDevice = row
      this.isCompleting = true
      this.repairForm = {
        diagnosis: row.diagnosis || '',
        solution: row.solution || '',
        parts: row.parts || [],
        progress: 100,
        result: '已修复',
        remark: ''
      }
      this.repairDialogVisible = true
    },
    addPart() {
      this.repairForm.parts.push({
        name: '',
        quantity: 1,
        price: 0
      })
    },
    removePart(index) {
      this.repairForm.parts.splice(index, 1)
    },
    submitRepair() {
      if (this.isCompleting) {
        if (!this.repairForm.result || !this.repairForm.remark) {
          this.$message.error('请填写完整的维修结果信息')
          return
        }
      } else {
        if (!this.repairForm.diagnosis || !this.repairForm.solution) {
          this.$message.error('请填写完整的维修信息')
          return
        }
      }

      // TODO: 提交维修信息到后端
      const repairRecord = {
        time: new Date().toLocaleString(),
        staff: '当前用户',
        action: this.isCompleting ? '完成维修' : '开始维修',
        content: this.isCompleting ? this.repairForm.result : this.repairForm.diagnosis,
        remark: this.repairForm.remark
      }

      this.currentDevice.repairHistory = this.currentDevice.repairHistory || []
      this.currentDevice.repairHistory.unshift(repairRecord)

      if (this.isCompleting) {
        // 从维修中列表移动到已完成列表
        const index = this.processingList.findIndex(item => item.deviceNo === this.currentDevice.deviceNo)
        if (index > -1) {
          const device = { ...this.currentDevice }
          device.completionTime = repairRecord.time
          device.repairResult = this.repairForm.result
          this.processingList.splice(index, 1)
          this.completedList.unshift(device)
        }
      } else {
        // 从待维修列表移动到维修中列表
        const index = this.pendingList.findIndex(item => item.deviceNo === this.currentDevice.deviceNo)
        if (index > -1) {
          const device = { ...this.currentDevice }
          device.repairStaff = repairRecord.staff
          device.startTime = repairRecord.time
          device.progress = this.repairForm.progress
          device.diagnosis = this.repairForm.diagnosis
          device.solution = this.repairForm.solution
          this.pendingList.splice(index, 1)
          this.processingList.unshift(device)
        }
      }

      this.$message.success(this.isCompleting ? '维修完成' : '维修已开始')
      this.repairDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.facility-repair {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    .repair-content {
      margin: 5px 0 0;
      color: #606266;
    }

    .repair-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .part-item {
    margin-bottom: 10px;
  }
}
</style> 